<template>
  <n-card title="串口配置">
    <div style="height: 750px">
      <n-grid :cols="3">
        <n-gi>
          <n-card :bordered="false">
            <div
              style="
                margin-bottom: 15px;
                background-color: #abbaca;
                color: aliceblue;
                text-align: center;
              "
              >TTL串口参数设置(PIN4-TX,PIN5-RX,PIN1-GND)</div
            >
            <div style="width: 100%; height: 100%; display: flex; justify-content: center">
              <n-form label-placement="left" label-width="60px" style="width: 70%">
                <n-form-item label="波特率">
                  <n-select v-model:value="baudRef" :options="baudOptions" />
                </n-form-item>
                <n-form-item label="校验位">
                  <n-select value="NONE" :options="parityOptions" />
                </n-form-item>
                <n-form-item label="数据位">
                  <n-select value="8 bit" :options="dataBitsOptions" />
                </n-form-item>
                <n-form-item label="停止位">
                  <n-select value="1 bit" :options="stopBitsOptions" />
                </n-form-item>
                <n-form-item>
                  <n-button style="margin-left: 60px" type="primary" @click="submitSerialHandler"
                    >提交配置</n-button
                  >
                </n-form-item>
              </n-form>
            </div>
          </n-card>
        </n-gi>
      </n-grid>
    </div>
  </n-card>
</template>
<script lang="ts" setup>
  import { getSerialConfig, setSerialConfig } from '@/api/serial';
  import { onMounted, ref } from 'vue';
  import { useMessage } from 'naive-ui';

  const message = useMessage();

  const baudOptions = [
    {
      label: '1200',
      value: '1200',
    },
    {
      label: '2400',
      value: '2400',
    },
    {
      label: '4800',
      value: '4800',
    },
    {
      label: '9600',
      value: '9600',
    },
    {
      label: '19200',
      value: '19200',
    },
    {
      label: '28800',
      value: '28800',
    },
    {
      label: '38400',
      value: '38400',
    },
    {
      label: '57600',
      value: '57600',
    },
    {
      label: '115200',
      value: '115200',
    },
    {
      label: '230400',
      value: '230400',
    },
    {
      label: '460800',
      value: '460800',
    },
    {
      label: '921600',
      value: '921600',
    },
    {
      label: '1152000',
      value: '1152000',
    },
    {
      label: '2304000',
      value: '2304000',
    },
    {
      label: '3750000',
      value: '3750000',
    },
    {
      label: '4000000',
      value: '4000000',
    },
  ];

  const parityOptions = [
    {
      label: 'NONE',
      value: 'NONE',
    },
  ];

  const dataBitsOptions = [
    {
      label: '8 bit',
      value: '8 bit',
    },
  ];

  const stopBitsOptions = [
    {
      label: '1 bit',
      value: '1 bit',
    },
  ];

  const baudRef = ref<string>();

  async function submitSerialHandler() {
    const config = {
      baud: baudRef.value,
    };
    //console.log(JSON.stringify(config));
    const result = await setSerialConfig(JSON.stringify(config));
    if (result.errorCode === -1) {
      message.error('串口配置失败');
      return;
    } else if (result.errorCode === 0 && result.errorMsg === 'success') {
      message.success('串口配置成功');
      return;
    }
  }

  onMounted(async () => {
    const serialConfig = await getSerialConfig();
    //console.log(serialConfig);
    baudRef.value = serialConfig.result.baud;
  });
</script>
